<dom-module id="cc-studio-component-inspector">
    <template>
        <editor-prop prop="{{target.type}}"></editor-prop>

        <div hidden="[[!_isCheckbox(target.type.value)]]">
            <editor-prop prop="{{target.checkNormalBackFrame}}"></editor-prop>
            <editor-prop prop="{{target.checkPressedBackFrame}}"></editor-prop>
            <editor-prop prop="{{target.checkDisableBackFrame}}"></editor-prop>
            <editor-prop prop="{{target.checkNormalFrame}}"></editor-prop>
            <editor-prop prop="{{target.checkDisableFrame}}"></editor-prop>
            <editor-prop prop="{{target.checkInteractable}}"></editor-prop>
            <editor-prop prop="{{target.isChecked}}"></editor-prop>
        </div>

        <div hidden="[[!_isTextAtlas(target.type.value)]]">
            <editor-prop prop="{{target.atlasFrame}}"></editor-prop>
            <editor-prop prop="{{target.firstChar}}"></editor-prop>
            <editor-prop prop="{{target.charWidth}}"></editor-prop>
            <editor-prop prop="{{target.charHeight}}"></editor-prop>
            <editor-prop prop="{{target.string}}"></editor-prop>
        </div>

        <div hidden="[[!_isSliderBar(target.type.value)]]">
            <editor-prop prop="{{target.sliderBackFrame}}"></editor-prop>
            <editor-prop prop="{{target.sliderBarFrame}}"></editor-prop>
            <editor-prop prop="{{target.sliderBtnNormalFrame}}"></editor-prop>
            <editor-prop prop="{{target.sliderBtnPressedFrame}}"></editor-prop>
            <editor-prop prop="{{target.sliderBtnDisabledFrame}}"></editor-prop>
            <editor-prop prop="{{target.sliderInteractable}}"></editor-prop>
            <editor-prop prop="{{target.sliderProgress}}"></editor-prop>
        </div>

        <div hidden="[[!_isListView(target.type.value)]]">
            <editor-prop prop="{{target.listInertia}}"></editor-prop>
            <editor-prop prop="{{target.listDirection}}"></editor-prop>
            <div hidden="[[!_isHList(target.listDirection.value)]]">
                <editor-prop prop="{{target.listVerticalAlign}}"></editor-prop>
            </div>
            <div hidden="[[!_isVList(target.listDirection.value)]]">
                <editor-prop prop="{{target.listHorizontalAlign}}"></editor-prop>
            </div>
            <editor-prop prop="{{target.listPadding}}"></editor-prop>
        </div>
    </template>

    <script>
        'use strict';

        Editor.registerElement({
            properties: {
                target: {
                    type: Object,
                    value: null,
                    notify: true,
                }
            },

            _isCheckbox(type) {
                return type === cc.StudioComponent.ComponentType.CHECKBOX;
            },

            _isTextAtlas(type) {
                return type === cc.StudioComponent.ComponentType.TEXT_ATLAS;
            },

            _isSliderBar(type) {
                return type === cc.StudioComponent.ComponentType.SLIDER_BAR;
            },

            _isListView(type) {
                return type === cc.StudioComponent.ComponentType.LIST_VIEW;
            },

            _isHList(dir) {
                return dir === cc.StudioComponent.ListDirection.HORIZONTAL;
            },

            _isVList(dir) {
                return dir === cc.StudioComponent.ListDirection.VERTICAL;
            },

            _isPageView(type) {
                return type === cc.StudioComponent.ComponentType.PAGE_VIEW;
            }
        });
    </script>
</dom-module>
